CSS Table — PBA Institute CSS Tutorial
Chapter 08 · CSS Tutorial Series
10 min read Beginner

CSS Table

CSS makes HTML tables beautiful and readable. By styling borders, padding, colors, and alignment, you can transform a plain table into a professional data display with hover effects, zebra striping, and responsive behavior.

Why Style Tables?

  • Readability: Proper spacing and alignment make data easier to scan.
  • Visual hierarchy: Headers stand out and rows are clearly separated.
  • Interactivity: Hover effects highlight the row a user is reading.
  • Responsiveness: Tables can be made horizontally scrollable on small screens.

Key CSS Table Properties

📏

border

Sets borders on table, th, and td.

🧱

border-collapse

Merges adjacent borders — collapse or separate.

📐

padding

Adds spacing inside each cell.

🎨

background-color

Colors rows, headers, or hover states.

📍

text-align

Aligns cell text — left, center, right.

🦓

nth-child

Creates zebra striping for alternate rows.

Table Syntax

CSS Table Syntax 
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}
th {
    background-color: #1a73e8;
    color: white;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #e8f4fd;
}
CSS Table Banner

CSS Table

Learn how to style HTML tables using borders, padding, colors, alignment, and layout properties.

Introduction

CSS tables can be styled using borders, spacing, padding, colors, alignment, and width properties to create clean and professional data layouts.

Table Example 1

This example creates a course details table with borders and grey table headers.

HTML + CSS Code 
<!DOCTYPE html>
<html>

<head>

<style>

body{
    background-color:#D6EAF8;
}

th{
    background-color:grey;
}

table, th, td{
    border:1px solid black;
    border-collapse:collapse;
}

th, td{
    padding:10px;
    text-align:left;
}

</style>

</head>

<body>

<table style="width:300px">

    <tr>
        <th>Course Name</th>
        <th>Fees</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>JAVA</td>
        <td>8000</td>
        <td>3 Months</td>
    </tr>

    <tr>
        <td>Python</td>
        <td>6000</td>
        <td>2 Months</td>
    </tr>

</table>

</body>
</html>
CSS Table Example
Output A table with black borders, grey table headers, and aligned table content.
  • border-collapse: Merges table borders into a single border.
  • padding: Adds spacing inside table cells.
  • text-align: Aligns content inside table cells.

Table Example 2

This example creates a colorful table with blue table headers and styled data cells.

HTML + CSS Code 
<!DOCTYPE html>
<html>

<head>

<style>

body{
    background-color:#CCD1D1;
}

td{
    background-color:#BBDDF5;
}

table, th, td{
    border:1px solid black;
    text-align:left;
}

th{
    background-color:#48AFF7;
}

</style>

</head>

<body>

<table style="width:80%">

    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
    </tr>

    <tr>
        <td>Namita</td>
        <td>Pal</td>
        <td>80</td>
    </tr>

    <tr>
        <td>Rokeiya</td>
        <td>Sultana</td>
        <td>94</td>
    </tr>

</table>

</body>
</html>
CSS Table Example 2
Output A responsive table with blue headers, light blue cells, and bordered layout.

Table Property Reference

Property Description
border-collapse Merges table borders
padding Adds spacing inside cells
text-align Aligns text inside cells
background-color Adds table colors

Important Notes

  • Use border-collapse for cleaner table borders.
  • Add padding for better readability.
  • Use colors to separate headers and data.
  • Use percentage width for responsive tables.

Conclusion

CSS table styling improves structure, readability, and visual appearance of tabular data on webpages.

Table Example

HTML + CSS Code 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Table</title>
    <style>
        body { font-family: Arial; padding: 20px; }
        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 2px 6px rgba(0,0,0,.1);
        }
        th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
        th { background: #1a73e8; color: #fff; }
        tr:nth-child(even) { background: #f9f9f9; }
        tr:hover { background: #e3f2fd; }
    </style>
</head>
<body>
    <h2>Student Marks</h2>
    <table>
        <tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
        <tr><td>1</td><td>Ravi</td><td>92</td></tr>
        <tr><td>2</td><td>Sneha</td><td>88</td></tr>
        <tr><td>3</td><td>Amit</td><td>76</td></tr>
        <tr><td>4</td><td>Pooja</td><td>95</td></tr>
    </table>
</body>
</html>
Output A clean table with blue header, alternating row colors, and a hover highlight effect.

Code Explanation

  • border-collapse: collapse: Removes double borders between cells.
  • nth-child(even): Applies zebra striping to even rows.
  • tr:hover: Highlights the row when the cursor is over it.
  • Header styling: th gets a distinct background and color.

Table Property Reference

Property Purpose Example
border-collapse Merge cell borders collapse
border-spacing Gap between cells (separate mode) 5px
caption-side Position of caption top / bottom
empty-cells Show/hide empty cells show / hide
vertical-align Vertical alignment top / middle

Table Design Patterns

Zebra Striping

Alternate row colors via nth-child(even).

Hover Highlight

Use tr:hover to mark the active row.

Responsive Table

Wrap with overflow-x: auto for small screens.

Common Symbols

Structure
table tr th td
Styling
border-collapse padding text-align
States
:hover :nth-child(even) :nth-child(odd)

Important Notes

  • Use semantic markup: Use thead, tbody, and tfoot for accessibility.
  • Always set width: Use width: 100% for full-width tables.
  • Use border-collapse: Without it, you'll get double borders between cells.
  • Make it responsive: Wrap large tables in a container with horizontal scroll.

Real-World Use Cases

Data Display

Show product lists, prices, marks, and reports.

Schedules

Class timetables, train schedules, event lists.

Pricing Tables

Compare plans and features side by side.

Practice Questions

  • Style a table with collapsed borders and 10px cell padding.
  • Add zebra striping using nth-child(even).
  • Highlight rows on hover with a light blue background.
  • Create a sticky table header using position: sticky.
  • Make a responsive table that scrolls horizontally on mobile.

Frequently Asked Questions

  • Why use border-collapse: It merges adjacent cell borders so each border is drawn only once.
  • How to alternate row colors: Use tr:nth-child(even) or tr:nth-child(odd).
  • How to make tables responsive: Wrap them in a div with overflow-x: auto; so they scroll on small screens.
  • Can CSS hide table columns: Yes — combine nth-child selectors with display: none.

Conclusion

CSS turns plain HTML tables into polished, readable data displays. With border-collapse, zebra striping, hover states, and responsive containers, your tables can look great on any device.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to CSS Margin Chapter

Next

Go to CSS Text Chapter